<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" %>
<%@ include file="baselayout/import.jsp"%>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="Bjtu Machine Learning">
	<meta name="author" content="Alex">
	<title>标记页面</title>
	<link rel="stylesheet" media="screen" href="${staticPath}/assets/css/other.css">
	<link rel="stylesheet" href="${staticPath}/assets/css/bootstrap.min.css">
	<link rel="stylesheet" href="${staticPath}/assets/css/font-awesome.min.css">
	<link rel="stylesheet" type="text/css" href="${staticPath}/assets/css/da-slider.css" />
	<link rel="stylesheet" href="${staticPath}/assets/css/style.css">
	<link rel="stylesheet" href="${staticPath}/assets/css/main.css">
<style type="text/css">
.navbar-inverse {
    background-color: #222;
    border-color: #080808;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
		<div class="container-fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
					<span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#">欢迎进入标记页面</a>
			</div>
			<div id="navbar" class="navbar-collapse collapse">
				<ul class="nav navbar-nav navbar-right">
					<li onclick="showStatusWorkbench()"><a href="../wexp/indexB.do">返回标记首页</a></li>
					<li><a href="../">返回系统首页</a></li>			
				</ul>
			</div>
		</div>
	</nav>
 <%-- <form class="navbar-form navbar-right">
					<input type="text" class="form-control" placeholder="搜索">
				</form> 
			</div>
	<div class="navbar navbar-inverse">
		<div class="container">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
				<a class="navbar-brand" href="/wechat">
					<img src="${staticPath}/assets/img/logo.jpg" alt="Techro HTML5 template"></a>
			</div>
			<div class="navbar-collapse collapse">
				<ul class="nav navbar-nav pull-right mainNav">
					<li class="active"><a href="/wechat">Home</a></li>
					<li><a href="#">About</a></li>
					<li><a href="#">Courses</a></li>
					<li><a href="#">Fees</a></li>
					<li><a href="#">Portfolio</a></li>
					<li class="dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">Pages <b class="caret"></b></a>
						<ul class="dropdown-menu">
							<li><a href="#">Right Sidebar</a></li>
							<li><a href="#">Dummy Link1</a></li>
							<li><a href="#">Dummy Link2</a></li>
							<li><a href="#">Dummy Link3</a></li>
						</ul>
					</li>
					<li><a href="#">Contact</a></li>
				</ul>
			</div>
		</div>
	</div> --%>
	
	<div class="container-fluid">
	<section class="container">
	<div class="heading">
			<h3></h3>
		</div>
		<div id="main" class="row">
			<div class="col-md-12">
				<blockquote class="blockquote-1">
				<p>ID输入库中可输入0到9999之间的数字，数字对应文本的索引号。输入数字之后可点击“获取”按钮来获取文本</p>
				<p>请仔细阅读文本，然后根据页面下方的提示进行类标选择</p>
					<!-- <p>输入ID(0-9999)之后点击获取按钮,输入序号之后可以按回车快速获取</p>
					<p>根据内容标注好类标(可以选择多个)之后点击最后的提交,如果出现问题请使用其他浏览器,推荐:Safari,Chrome,Firefox</p> -->
					<small>如果出现页面显示问题请更换当前使用的浏览器；推荐：Safari,Chrome,Firefox</small>
				</blockquote> 
				<label>ID</label>
				<input id="val" name ="id" ></input>
				<input  id="get" type = "button" value="获取"></input>
				<div id ="res">
				<label>序号:</label>
				<div id='SEQ'>${wechat.id}</div>
				<label>标题:</label>
				<div id='title'>${wechat.title}</div>
				<label>微信名字:</label>
				<div id='name'>${wechat.name}</div>
				<label>微信号:</label>
				<div id='account'>${wechat.account}</div>
				<label>微信简介:</label>
				<div id='brief'>${wechat.brief}</div>
				<label>内容:</label>
				<div id='content'>${wechat.content}</div>
				<label>日期:</label>
				<div id='date'>${wechat.date}</div>
				</div>
				<p><label>以下为15个给定的主类标</label><label id="exist">，该文章已有分类：</label></p>
				<c:forEach items="${classes}" var="item" varStatus="status">  
					<button id="choice" class="btn btn-default btn-sm" value="${item.id }" type="button">${item.classname}</button>
					<div style="display:none"><input  type="checkbox" name="labelid" value="${item.id }" ><label>${item.classname}</label></div>
				</c:forEach>  
				
			</div>
		</div>
		<div id="subff" class="row">
			<blockquote class="blockquote-1">
				当点击上面的主类标之后，下面将出现子类标，如果没出现，则表示无子类标<br>
				当提交成功之后，将会页面自动显示下一个文本，不需要再通过ID获取。
			</blockquote>
			<div id="subclass" class="col-md-12">
			</div>
		</div>
		<p class="text-center"><input class="btn btn-primary"  id="sub" type = "button" value="提交"></input>
				<input id="next" style="display:none" type = "button" value="下一个"></input></p>
		<p  id="tip" style="display:none;color:green" class="text-center">操作成功</p>
	</section>
	</div>
	
	
	<!-- <footer id="footer">
		<div class="container">
			<div class="social text-center">
				<a href="#"><i class="fa fa-twitter"></i></a>
				<a href="#"><i class="fa fa-facebook"></i></a>
				<a href="#"><i class="fa fa-dribbble"></i></a>
				<a href="#"><i class="fa fa-flickr"></i></a>
				<a href="#"><i class="fa fa-github"></i></a>
			</div>
			<div class="clear"></div>
			CLEAR FLOATS
		</div>
		<div class="footer2">
			<div class="container">
				<div class="row">
					<div class="col-md-6 panel">
						<div class="panel-body">
							<p class="simplenav">
								<a href="index.html">Home</a> | 
								<a href="about.html">About</a> |
								<a href="courses.html">Courses</a> |
								<a href="fees.html">Fees</a> |
								<a href="portfolio.html">Portfolio</a> |
								<a href="contact.html">Contact</a>
							</p>
						</div>
					</div>

					<div class="col-md-6 panel">
						<div class="panel-body">
							<p class="text-right">
								Copyright &copy; 2016. BJTU All rights reserved.<a target="_blank" href="http://weibo.com/u/2941171583">Edited by Alex</a>
							</p>
						</div>
					</div>

				</div>
				/row of panels
			</div>
		</div>
	</footer> -->
	<!-- JavaScript libs are placed at the end of the document so the pages load faster -->
	<script src="${staticPath}/assets/js/modernizr-latest.js"></script>
	<script src="${staticPath}/js/jQuery-1.9.1.js"></script>
	<script src="${staticPath}/js/bootstrap.min.js"></script>
	<!-- <script src="assets/js/jquery.cslider.js"></script>
	<script src="assets/js/custom.js"></script> -->
	<script type="text/javascript"> 
	var allChildLabels = [];
	function myreset(){
		$("#subclass").children().each(function(){
			$(this).hide(600,function(){$(this).remove();});
			
		});
		$("div#main button").each(function(){
			$(this).removeClass("active");
			$(this).next().children(":first").prop("checked",false);
		}); 
		
	}
	function updateSublabels(btn,flag){
		$("#subclass").children().remove();
		var str = "<button type=\"button\" class=\"btn btn-default btn-sm\"></button>"
		if(flag){
			var pid = parseInt(btn.val());
			for(sub in allChildLabels){
				if(allChildLabels[sub].parentId==pid){
					newbtn = $(str);
					newbtn.html(allChildLabels[sub].classname);
					newbtn.val(allChildLabels[sub].id);
					newbtn.click(function(){
						var has = $(this).hasClass("active");
						if(has){
							$(this).removeClass("active");
						}else{
							$(this).addClass("active");
						}
					});
					$("#subclass").append(newbtn);
				}				
			}
		}else{
		}
	}
	function clickbtn(obj){
		var btn = obj.data;
		var chbox = btn.next().children(":first");
		var result =  btn.hasClass("active");
		$("div#main button").each(function(){
			$(this).removeClass("active");
			$(this).next().children(":first").prop("checked",false);
		}); 
		if(!result){
			btn.addClass("active");
			chbox.prop("checked",true);
			updateSublabels(btn,true);
		}else{
			updateSublabels(btn,false);
		}
	}
	$(document).ready(function(){
		//加载所有的子类去。 
		$.ajax({
			'url':"getAllChildren.do",
			 success: function(data){
			   var l = eval("("+data+")");
			   allChildLabels = [];
			   for(child in l){
				   allChildLabels.push(l[child]);
			   }
             }
		});
		$("div#main button").each(function(){
				$(this).bind("click",$(this),clickbtn)
		});
	   $("div#main input[type=checkbox]").each(function(){
    	   $(this).prop("checked",false);
       });
		var url ='get.do?id=';
		var btns = "<button type=\"button\" class=\"btn btn-default btn-sm\"></button>"
		$("#get").click(function(a){
			val = $("#val").val();
			parsedUrl = url+val;
			if (!isNaN(val)){
				$.ajax({
					'url':parsedUrl,
					 success: function(data){
					   list = eval("("+data+")");
					   classes = list[0].wechatclassmaps;
                       $("#SEQ").html(list[0].id);
                       $("#title").html(list[0].title);
                       $("#name").html(list[0].name);
                       $("#account").html(list[0].account);
                       $("#brief").html(list[0].brief);
                       $("#content").html(list[0].content);
                       $("#date").html(list[0].date);
                       labels = list[0].wechatclassmaps;
                       $("#exist").children().remove();
                       labels.forEach(function(x){
                    	    newbtn = $(btns);
                    	    newbtn.html(x.label.classname+"("+x.times+")");
                    	  	$("#exist").append(newbtn);
                       });       
                      }
				});
			}
		});
		var Curl ='update.do?';
		var interval = true;
		var timeout = null;
			$("#sub").click(function(b){
			if(interval){
				interval = false;
				timeout = setInterval(function(){
					interval=true;
					clearTimeout(timeout);
				},5000);
				
				 if($("#SEQ").html().length==0){
					alert("参数错误!");
					return;
				}
				params = [];
				updateUrl = '';
				finalurl = '';
				$("input[type=checkbox]").each(function(cb){
					if($(this).prop("checked")){
						params.push($(this).val());
					}			
				});
				var beforeCount = params.length;
				//添加进去子类的分类,没有就没有
				var hasSub = false;
				$("#subclass").children().each(function(){
					hasSub = true;
					if($(this).hasClass("active")){
						params.push($(this).val());
					}
				});
				if(params.length==0){
					alert("请选择分类");
					return ;
				}
				if(hasSub){
					if(params.length == parseInt(beforeCount)){
						alert("请选择子类");
						return;
					}
				}
				params.forEach(function(val){
					if(updateUrl.length==0){
						updateUrl+=('labelid='+val)
					}else{
						updateUrl+=('&labelid='+val)
					}
					finalurl = Curl+updateUrl+"&id="+$("#SEQ").html();
				});
				params = [];
				$.ajax({
					'url':finalurl,
					 success: function(data){
						 res = eval('('+data+')');
					     $("#tip").show();
	                       setTimeout(function(){
	                    	   $("#tip").fadeOut();
	                       },4000);
	                 }
				}); 
				myreset();
				$("#next").click();
			}else{//interval
				alert("您的请求过于频繁");
			}
			});		
		});
	$("#next").click(function(){
		val = $("#val").val();
		val = parseInt(val)+1;
		if(isNaN(val)){
			$("#val").val("1");
		}else{
			$("#val").val(val);
		}
		$("#get").click();
	});
	$(document).keydown(function(event){ 
		var reg=/^[1-9]\d*$|^0$/; // 注意：故意限制了 0321 这种格式，如不需要，直接reg=/^\d+$/;
        if((event.keyCode) == 13){
	       	 if(reg.test($("#val").val())==true){
	       		$("#get").click();
			 }else{
				 alert("非法参数");
			 	return false;
			 }
        }
	}); 	
</script>
</body>
</html>
